<!DOCTYPE HTML>
<#--
/**
 * Copyright 2012 Claude Houle claude.houle@gmail.com
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-->
<html>
<#escape x as x?html>
	<#include "/web/pages/frame/header.ftl" />
	<#include "/web/widgets/ui-tree.ftl" />
	<#include "/web/widgets/ui-link.ftl" />
	<#include "/web/widgets/ui-button.ftl" />


	<#include "/web/widgets/ui-select.ftl" />
	<#include "/web/widgets/ui-textfield.ftl" />
	<#include "/web/widgets/ui-tooltip.ftl" />
	<#include "/web/components/ui-form-field-mandatory.ftl" />
	<#include "/web/components/ui-form-field-validation.ftl" />
	<#include "/web/components/ui-form-field-validations.ftl" />

	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta http-equiv="pragma" content="no-cache" />
		<meta http-equiv="cache-control" content="no-cache" />
		<meta http-equiv="expires" content="0" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

		<link rel="shortcut icon" href="/favicon.ico" />
		<link rel="stylesheet/less" type="text/css" href="/user-settings/edit/info.less" />
		<link rel="stylesheet" type="text/css" href="/libs/jqueryui/jquery-ui-1.8.16.custom.css" />

		<script type="text/javascript" src="/libs/less-1.2.0.min.js"></script>
		<script type="text/javascript" src="/libs/jquery/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="/libs/jquery_caret/jquery_caret.js"></script>
		<script type="text/javascript" src="/libs/jqueryui/jquery-ui-1.8.16.custom.min.js"></script>

		<script type="text/javascript">
			$().ready( function(){
				<@tooltip target=".uic-form-field-mandatory-marker" id="tooltip_mandatory" text=i18n("MsgMandatory") orientation="RIGHT" />

				$("#btn_save").click( function(){
                    $('.uic-form-field-validation-message').empty();

					var valid = true;
					if( $('#username').val() == "" ){
						$('#username_validation').empty().append( '${i18n("MsgMandatory")}' );
						valid = false;
					}

					if( $('#email').val() == "" ){
						$('#email_validation').empty().append( '${i18n("MsgMandatory")}' );
						valid = false;
					}

					if( $('#timeout').val() == "" ){
						$('#timeout_validation').empty().append( '${i18n("MsgMandatory")}' );
						valid = false;
					}else {
						var timeout = parseInt( $('#timeout').val() );
						if( timeout < ${minTimeout} || timeout > ${maxTimeout} ){
							$('#timeout_validation').empty().append( '${i18n("MsgTimeoutInvalid", minTimeout, maxTimeout)}' );
							valid = false;
						}
					}

					if( !valid )
						return;

					var useInfo = JSON.stringify( {
						"username": $('#username').val(),
						"firstname": $('#firstname').val(),
						"lastname": $('#lastname').val(),
						"email": $('#email').val(),
						"language": $('#language').val(),
						"timeout": parseInt($('#timeout').val())
					});


					$.ajax("info", {
						type: 'POST',
						async: true,
						contentType: 'application/json',
						dataType: 'json',
						cache: false,
						data: useInfo,
						error:  function( jqXHR, status, error ){
							if( status == 'timeout' ){
								return;
							}

							if( status == 'error'){
								<@form_field_validations />
							}
						},
						success:  function( data, status, error ){
							window.location.reload();
						},
						timeout: 60000
					});
				});

				$("#btn_cancel").click(function(){
					window.location.replace( "/" );
				});
			});
		</script>
		<title>${i18n('headtitle')}</title>
	</head>
	<body>
		<#include "/web/pages/frame/frame-start.ftl" />
			<table class="uic-form">
				<tr class="uic-form-title">
					<td>${i18n("formtitle")}</td>
				</tr>
				<tr class="uic-form-content-wrapper">
					<td>
						<table class="uic-form-content">
							<tr class="uic-form-section-row">
								<td colspan="2" class="uic-form-section"><div class="uic-form-section">${i18n("lblSectionGeneral")}</div></td>
							</tr>
							<tr class="uic-form-row uic-form-row-first">
								<td colspan="1" width="38%" class="uic-form-label"><div>${i18n("lblUsername")}</div></td>
								<td colspan="1" class="uic-form-field">
									<@textfield id="username" class="uic-form-field-mandatory" maxlength=75 value=info.username />
                                    <@form_field_mandatory fieldId="username" />
                                    <@form_field_validation fieldId="username" />
								</td>
							</tr>
							<tr class="uic-form-row">
								<td colspan="1" width="38%" class="uic-form-label"><div>${i18n("lblFirstName")}</div></td>
								<td colspan="1" class="uic-form-field"><@textfield id="firstname" maxlength=255 value=info.firstname /></td>
							</tr>
							<tr class="uic-form-row">
								<td colspan="1" width="38%" class="uic-form-label"><div>${i18n("lblLastName")}</div></td>
								<td colspan="1" class="uic-form-field"><@textfield id="lastname" maxlength=255 value=info.lastname /></td>
							</tr>
							<tr class="uic-form-row">
								<td colspan="1" width="38%" class="uic-form-label"><div>${i18n("lblEmail")}</div></td>
								<td colspan="1" class="uic-form-field">
									<@textfield id="email" class="uic-form-field-mandatory" maxlength=255 value=info.email />
									<@form_field_mandatory fieldId="email" />
                                    <@form_field_validation fieldId="email" />
                                </td>
							</tr>
							<tr class="uic-form-row uic-form-row-last">
								<td colspan="1" class="uic-form-label"><div>${i18n("lblLanguage")}</div></td>
								<td colspan="1" class="uic-form-field"><@select id="language" class="uic-form-field-mandatory" choices=languages  />
									<@form_field_mandatory fieldId="language" />
                                    <@form_field_validation fieldId="language" />
                                </td>
							</tr>
							<tr class="uic-form-section-row">
								<td colspan="2" class="uic-form-section"><div class="uic-form-section">${i18n("lblSectionConsoleTimeout")}</div></td>
							</tr>
							<tr class="uic-form-row uic-form-row-first uic-form-row-last">
								<td colspan="1" width="38%" class="uic-form-label"><div>${i18n("lblConsoleTimeout")}</div></td>
								<td colspan="1" class="uic-form-field">
									<@textfield id="timeout" class="uic-form-field-mandatory" maxlength=10 value=info.timeout regex="^\\d+$" />
									<@form_field_mandatory fieldId="timeout" />
                                    <@form_field_validation fieldId="timeout" />
                                </td>
							</tr>
						</table>
					</td>
				</tr>
				<tr class="uic-form-actions">
					<td>
						<@button id="btn_save" caption=i18n("btnSave") />
						<@button id="btn_cancel" caption=i18n("btnCancel") />
					</td>
				</tr>
			</table>
		<#include "/web/pages/frame/frame-end.ftl" />
	</body>
</#escape>
</html>